<template>
  <div>
    <el-dialog :title="title" :visible.sync="openForm" width="1190px" append-to-body :close-on-click-modal="false">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="缺陷信息" name="problemPane">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row :gutter="24" class="mb8">
              <el-col :span="24">
                <el-form-item label="缺陷名称" prop="problemName">
                  <el-input v-model="form.problemName" placeholder="可以通过名称简述该缺陷的特征" maxlength="50" show-word-limit
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="24" class="mb8">
              <el-col :span="8">
                <el-form-item label="所属服务" prop="serviceName">

                  <el-input v-model="form.serviceName" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="缺陷原因" prop="problemCause">
                  <el-select v-model="form.problemCause" clearable filterable placeholder="请选择缺陷原因"
                             :disabled="disabled">
                    <el-option v-for="dict in problemCauseOptions" :key="dict.value" :label="dict.label"
                               :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="缺陷等级" prop="problemLevel">
                  <el-select v-model="form.problemLevel" clearable filterable placeholder="请选择缺陷等级"
                             :disabled="disabled">
                    <el-option v-for="dict in problemLevelOptions" :key="dict.value" :label="dict.label"
                               :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="mb8">
              <el-col :span="8">
                <el-form-item label="记录时间" prop="recordTime">
                  <el-input v-model="form.recordTime" type="datetime" :disabled="true"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="处理人" prop="disposeUser">
                  <el-select v-model="form.disposeUser" clearable filterable placeholder="请选择处理人" :disabled="disabled">
                    <el-option v-for="user in userOptions" :key="user.userId" :label="user.name"
                               :value="user.userId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="解决时间" prop="resolveTime">
                  <el-date-picker
                    v-model="form.resolveTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="mb8">
              <el-col :span="24">
                <el-form-item label="缺陷描述" prop="problemDesc">
                  <el-input v-model="form.problemDesc" type="textarea" :rows="4" maxlength="2000" show-word-limit
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="mb8">
              <el-col :span="24">
                <el-form-item label="解决方案" prop="resolveDesc">
                  <el-input v-model="form.resolveDesc" type="textarea" :rows="4" maxlength="2000" show-word-limit
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="日志信息" name="alarmLogPane">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row :gutter="24" class="mb8">
              <el-col :span="18">
                <el-form-item label="链路ID" prop="traceId">
                  <el-input v-model="form.traceId" :disabled="true">
                    <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.traceId"
                               v-clipboard:success="copySuccessHandle"
                               v-clipboard:error="copyErrorHandle"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button icon="el-icon-download" type="text" @click="exportTxt">导出日志信息</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="mb8">
              <el-col :span="6">
                <el-form-item label="服务名" prop="serviceName">
                  <el-input v-model="form.serviceName" :disabled="true" style="width:200px;"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="告警时间" prop="alarmTime">
                  <el-input v-model="form.alarmTime" :disabled="true" style="width:170px;"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="负责人" prop="chargeUserName">
                  <el-input v-model="form.chargeUserName" :disabled="true" style="width:130px;"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="告警标识" prop="stackHash">
                  <el-input v-model="form.stackHash" :disabled="true" style="width:150px;">
                    <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.stackHash"
                               v-clipboard:success="copySuccessHandle"
                               v-clipboard:error="copyErrorHandle"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="mb8">
              <el-col :span="12">
                <el-form-item label="代码文件" prop="errorFileName">
                  <el-input v-model="form.errorFileName" :disabled="true">
                    <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.errorFileName"
                               v-clipboard:success="copySuccessHandle"
                               v-clipboard:error="copyErrorHandle"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="请求地址" prop="requestUri">
                  <el-input v-model="form.requestUri" :disabled="true">
                    <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.requestUri"
                               v-clipboard:success="copySuccessHandle"
                               v-clipboard:error="copyErrorHandle"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="mb8">
              <el-col :span="24">
                <div style="height: 250px;overflow: auto;">
                  <json-viewer :value="form.logMessage == null ? {} :  form.logMessage"
                               :expand-depth=1
                               :expanded="true"
                               copyable
                               :boxed="false"></json-viewer>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div v-if="disabled === false" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    addProblem,
    problemDetail,
    updateProblem,
    problemDetailByLog,
    dictListByType
  } from "@/api/hawkeye/problem";
  import {userList} from "@/api/hawkeye/service";
  import {formatDate} from "@/utils/index";
  import JsonViewer from 'vue-json-viewer'

  export default {
    name: "ModalForm",
    components: {
      JsonViewer
    },
    props: {},
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        openForm: false,
        activeName: 'problemPane',
        problemLevel: 'problemLevel',
        problemCause: 'problemCause',
        // 表单参数
        form: {
          problemName: null
        },
        // 表单校验
        rules: {
          problemDesc: [
            {required: true, message: "缺陷描述不能为空", trigger: "blur"}
          ]
        },
        problemCauseOptions: [],
        problemLevelOptions: [],
        userOptions: [],
        disabled: false
      };
    },
    created() {
      console.log(11)
      this.getUserList();
      this.getProblemLevelList();
      this.getProblemCauseList();
    },
    methods: {
      open(row, isView) {
        this.reset();
        const id = row.id || this.ids
        problemDetail(id).then(response => {
          let data = response.data;
          data.serviceName = `${data.serviceCnName ? data.serviceCnName : 'unknown'}(${data.serviceZnName ? data.serviceZnName : 'unknown'})`;
          this.form = data;
          this.disabled = isView;
          this.openForm = true;
          this.title = isView ? "查看" : "编辑";
        });
      },
      createProblem(row) {
        this.reset();
        if (row.isCreateProblem === 1) {
          const baseAlarmId = row.baseAlarmId
          problemDetailByLog(baseAlarmId).then(response => {
            let data = response.data;
            data.serviceName = `${data.serviceCnName ? data.serviceCnName : 'unknown'}(${data.serviceZnName ? data.serviceZnName : 'unknown'})`;
            this.form = data;
            this.$set(this.form, "serviceId", row.serviceId);
            this.openForm = true;
          });
          this.title = "缺陷信息";
          this.disabled = true;
        } else {
          this.disabled = false;
          let serviceName = `${row.serviceCnName ? row.serviceCnName : 'unknown'}(${row.serviceZnName ? row.serviceZnName : 'unknown'})`;
          this.$set(this.form, "problemName", null);
          this.$set(this.form, "problemDesc", '');
          this.$set(this.form, "recordTime", formatDate(new Date()));
          this.$set(this.form, "baseAlarmId", row.baseAlarmId);
          this.$set(this.form, "serviceId", row.serviceId);
          this.$set(this.form, "chargeUserId", row.chargeUserId);
          this.$set(this.form, "traceId", row.traceId);
          this.$set(this.form, "serviceName", serviceName);
          this.$set(this.form, "alarmTime", row.alarmTime);
          this.$set(this.form, "chargeUserName", row.chargeUserName);
          this.$set(this.form, "stackHash", row.stackHash);
          this.$set(this.form, "requestUri", row.requestUri);
          this.$set(this.form, "errorFileName", row.errorFileName);
          this.$set(this.form, "logMessage", row.logMessage);
          this.$set(this.form, "status", 0);
          this.title = "创建缺陷";

        }
        this.openForm = true;
      },
      getProblemLevelList() {
        dictListByType(this.problemLevel).then(res => {
          this.problemLevelOptions = res.data;
        })
      },
      getProblemCauseList() {
        dictListByType(this.problemCause).then(res => {
          this.problemCauseOptions = res.data;
        })
      },
      getUserList() {
        userList().then(res => {
          this.userOptions = res.data;
        })
      },
      handleClick(tab, event) {

      },
      // 复制成功回调函数
      copySuccessHandle(value) {
        this.$modal.msgSuccess("内容已复制到剪切板,可进行粘贴");
      },
      // 复制失败回调函数
      copyErrorHandle(value) {
        this.$modal.msgError("复制失败,请确认浏览器支持复制功能");
      },
      exportTxt() {
        this.download('/hawk-eye/log/export-log-txt?baseAlarmId=' + this.form.baseAlarmId, {}, `告警日志_${new Date().getTime()}.txt`)
      },
      // 取消按钮
      cancel() {
        this.openForm = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          serviceId: null,
          traceId: null,
          alarmTime: null,
          disposeUser: null,
          problemName: null,
          problemCause: null,
          problemLevel: null,
          problemDesc: null,
          stackTrace: null
        };
        this.resetForm("form");
        this.activeName = 'problemPane';
        this.disabled = false;
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateProblem(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.openForm = false;
                this.$emit("submitted", response);
              });
            } else {
              addProblem(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.openForm = false;
                this.$emit("submitted", response);
              });
            }
          }
        });
      },
    }
  };
</script>
<style scoped="css">
</style>
